<h1 *ngIf="res">
  <clr-icon
    [attr.shape]="res.shape"
    *ngIf="res.shape"
    size="48"
    class="resIcon"
  ></clr-icon>
  {{ res?.name }}
  <span style="margin-left: 1rem;" [ngClass]="{ 'text-danger': res.isCapped }">
    <app-formatted-quantity [quantity]="res.quantity" [integer]="true">
    </app-formatted-quantity>
  </span>
  <span *ngIf="res.isLimited" [ngClass]="{ 'text-danger': res.isCapped }">
    /<app-formatted-quantity [quantity]="res.limit" [integer]="true">
    </app-formatted-quantity>
  </span>
</h1>
<div>
  <clr-tabs *ngIf="res">
    <clr-tab>
      <button clrTabLink>概览</button>
      <clr-tab-content *clrIfActive>
        <app-resource-overview [res]="res"></app-resource-overview>
      </clr-tab-content>
    </clr-tab>

    <clr-tab *ngIf="res.modStack && res.modStack.maxPoints.gt(0)">
      <button clrTabLink>
        模型
        <span class="badge badge-info" *ngIf="res.modStack.unusedPoints.gt(0)">
          <app-formatted-quantity
            [quantity]="res.modStack.unusedPoints"
            [integer]="true"
            [monospace]="false"
          ></app-formatted-quantity>
        </span>
      </button>
      <clr-tab-content *clrIfActive>
        <app-modding [res]="res"></app-modding>
      </clr-tab-content>
    </clr-tab>

    <clr-tab *ngIf="res.unlockedAutomators.length > 0">
      <button clrTabLink>{{ res.automation1Name }}</button>
      <clr-tab-content *clrIfActive>
        <app-automator-group
          [autoGrp]="res.unlockedAutomators"
        ></app-automator-group>
      </clr-tab-content>
    </clr-tab>

    <clr-tab *ngIf="res.unlockedAutomators2.length > 0">
      <button clrTabLink>{{ res.automation2Name }}</button>
      <clr-tab-content *clrIfActive>
        <app-automator-group
          [autoGrp]="res.unlockedAutomators2"
        ></app-automator-group>
      </clr-tab-content>
    </clr-tab>
  </clr-tabs>
</div>
